<template>
	<view class="contain" :style="{ paddingTop: setmargintop() + 'px' }">
		<view class="new-top-nav">
			<uni-nav-bar title="科普培训" backgroundColor="#fff" color="#000" statusBar="true" @clickLeft="back()"
				left-icon="arrowleft"></uni-nav-bar>
		</view>
		<view class="contain-view">
			<view class="searchs">
				<!-- search模块 -->
				<view class="search">
					<view class="testop">
						<view class="buttime">
							<view class="center">
								<image src="@/static/socialized-service/breed/guanjian.png" mode="aspectFit"></image>
								<uni-easyinput class="uni-mt-5" v-model="searchName" :inputBorder="false" style="width: 100%;"
									placeholder="关键词"></uni-easyinput>
							</view>
						</view>
					</view>
					<view class="btn" @click="goSearch">搜索</view>
				</view>
			</view>
			
			<scroll-view scroll-y="true" :style="{height:setcollapseheight() + 'px'}" :scroll-top="scrollTop"
				@scroll="onScroll" @scrolltolower="handleScrolltolowerone()">
				<view v-if="articleList.length != 0" class="article-box">
					<view class="article-card" v-for="item,index in articleList" :key="item.articleId"
						@click="loadArticleDetail(item)">
						<view class="header">
							<view class="title">
								<view class="title-name">{{ item.title }}</view>
							</view>
							<view class="poster1">
								<view class="post">培训时间：{{ item.startTimeStr }}</view>
								<view class="post">培训人：{{ item.trainers }}</view>
							</view>
							<view class="poster1">
								<view class="post">培训类型：{{ item.trainType === 0 ? '线上培训' : '线下培训' }}</view>
								<view class="post">培训时长：{{ item.duration }}分钟</view>
							</view>
							<view class="poster">
								<view class="post">培训地点：{{ item.address }}分钟</view>
							</view>
							<view class="content">{{ item.contentNoImg }}</view>
						</view>
					</view>
				</view>

				<view v-if="articleList.length == 0" class="facility-view-nodata">
					<image class="facility-view-blankimg" mode="widthFix" src="@/static/blank.png"></image>
					<view class="facility-view-nodata-line">
						暂无数据
					</view>
				</view>
			</scroll-view>
		</view>
		<bottomBar></bottomBar>
	</view>
</template>

<script>
	import bottomBar from "@/subPage1/components/socialized-bottomtabar/breed-bottomtabar"

	import API from '@/api/socialized-servce/breed-aquatics/popular-science-training/index.js'

	export default {
		components: {
			bottomBar
		},
		data() {
			return {
				selected: 0,
				scrollTop: 0,
				oldScrollTop: 0,
				// 可选择跳转页面数据
				searchName: '',
				articleList: [],
				techPage: {
					page: 1,
					size: 5,
					total: 0,
				},
			}
		},
		onPullDownRefresh() {
			this.searchName = ''
			this.searchParam = {}
			this.updataContent()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onLoad(e) {
			if (e.key) {
				this.searchName = e.key
				this.searchParam = {
					title: e.key
				}
			}
		},
		onShow() {
			
		},
		mounted() {
			this.getPopularScienceTraining()
		},
		methods: {
			onScroll(e) {
				this.oldScrollTop = e.detail.scrollTop
			},
			// 获取文章列表
			getPopularScienceTraining() {
				API.queryPopularScienceTraining({
					...this.techPage,
					condition: {
						...this.searchParam,
						serviceProviderNo: uni.getStorageSync('serviceProviderNo')
					}
				}).then(res => {
					let list = res.data.content
					list.map(el => {
						el.contentNoImg = el.content.replace(/<.*?>/ig, "")
					})
					this.techPage.total = res.data.totalElements
					if (this.techPage.page == 1) {
						this.articleList = list
						this.scrollTop = this.oldScrollTop
						this.$nextTick(() => {
							this.scrollTop = 0
						})
					} else {
						this.articleList.push(...list)
					}
				})
			},
			// 搜索
			goSearch() {
				this.searchParam = {
					title: this.searchName,
				}
				this.updataContent()
			},
			updataContent() {
				this.techPage.page = 1
				this.getPopularScienceTraining()
			},
			// 上拉加载更多
			handleScrolltolowerone() {
				let len = this.techPage.page * this.techPage.size
				if (len >= this.techPage.total) return
				this.techPage.page += 1
				this.getPopularScienceTraining()
			},
			// 文章详情
			loadArticleDetail(row) {
				console.log(row); return
				this.$togo('/subPage1/socialized-service/breed-aquatics/tech-article/article-detail/index', {
					id: row.articleId
				})
			},
			// 设置顶部高度
			setmargintop() {
				let top = 0
				top = this.customBar + 10
				return top
			},
			//  设置内容高度
			setcollapseheight() {
				let topheightone = uni.upx2px(230)
				let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				let oldHeight = uni.upx2px(140)
				winHeight = parseInt(winHeight) - newheight - oldHeight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			//返回上一步
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		font-size: 14px;
		line-height: 24px;

		.new-top-nav {
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 99;
		}

		.contain-view {
			margin: 0 30rpx;
			position: relative;

			.searchs {
				position: relative;
				display: flex;
				padding-top: 16rpx;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;

				.search {
					width: 100%;
					height: 80rpx;
					border-radius: 60rpx;
					background-color: rgba(255, 255, 255, 1);
					border: 1px solid rgba(0, 0, 0, 0.05);
					box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;

					.testop {
						// width: 50%;
						width: 100%;
						color: #FFFFFF;
						height: 50rpx;
						// border-right: 4rpx #cccbce solid;
						margin-left: 5rpx;
						padding-right: 10rpx;
						font-size: 30rpx;

						&:last-child {
							border-right: none;
						}

						.buttime {
							color: #959497;
							height: 50rpx;
							white-space: nowrap;
							font-weight: 600;
							display: flex;
							justify-content: space-between;
							align-items: center;
							overflow: hidden;
						}

						.center {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;

							.textt {
								width: 190rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							image {
								width: 50rpx;
								height: 50rpx;
								margin-right: 10rpx;
								margin-left: 10rpx;
							}
						}

						::v-deep .uni-date-x {
							padding: 0;
							width: 176rpx;

							.uni-date__x-input {
								padding: 0;
							}

							.icon-calendar {
								display: none;
							}
						}

						::v-deep .uni-date__icon-clear {
							top: 2rpx;
							right: -10rpx;

							.uniui-clear::before {
								font-size: 30rpx;
								color: rgb(192, 196, 204);
							}
						}
					}

					.searchbutton {
						width: 20%;
						background: linear-gradient(18deg, #43A2FF 0%, #62B1FF 100%);
						border-radius: 40rpx;
						box-shadow: none;
						margin-left: 10rpx;
						font-size: 28rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.btn {
					position: relative;
					z-index: 66;
					width: 130rpx;
					height: 64rpx;
					margin: 0 16rpx 0 8rpx;
					font-size: 28rpx;
					line-height: 64rpx;
					text-align: center;
					color: #FFFFFF;
					background: linear-gradient(18deg, #43A2FF 0%, #62B1FF 100%);
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					opacity: 1;
				}
			}

			.article-box {
				overflow: auto;

				.article-card {
					width: 100%;
					background-color: #fff;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;
					
					.icon {
						vertical-align: middle;
						margin-right: 10rpx;
					}

					.header {
						// border-bottom: 1px solid #d3e6f9;
						padding: 20rpx;

						.title {
							font-size: 16px;
							font-weight: bold;
							margin-bottom: 10rpx;

							.title-name {
								display: inline-block;
								color: #88744e;
								// margin-left: 16rpx;
							}
						}
						
						.poster1 {
							display: flex;
							justify-content: space-between;
						}

						.content {
							// padding-left: 22px;
							margin-top: 40rpx;
							max-height: 96px;
							overflow: hidden;
							display: -webkit-box;
							text-overflow: ellipsis;
							-webkit-line-clamp: 4;
							-webkit-box-orient: vertical;
						}
					}

					.footer {
						padding:  0 20rpx 20rpx;
						color: #707273;

						.poster {
							display: flex;

							.post {
								flex: 2;
								width: 40%;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;

								&:last-child {
									flex: 3;
									width: 60%;
								}
							}
						}
					
					}
				}
			}
		}
	}
</style>